// @import './variables.scss';
@use './variables.scss';
/*
	global.scss 为原子化css，最小颗粒度的样式类。目的是在业务中，尽可能地少写样式。
	=====================================================================================
	【说明！！！】项目中的具体样式不能写入在这里,同时业务class不能写g-开头的样式。
	1.该样式为项目通用的全局样式。适合于pc、h5各个项目。
	2.目前分为布局、字体颜色、字体大小、背景色、内外边距，定位，浮动，其他等几大板块
	3.内外边距、字号均50以内  圆角20以内

*/
/* 布局 */

.g-flex {
  display: flex;
}
.g-col {
  flex: 1;
}
.g-1of2 {
  flex: 0 0 50%;
}
.g-1of3 {
  flex: 0 0 33.3333%;
}
.g-1of4 {
  flex: 0 0 25%;
}
.g-1of5 {
  flex: 0 0 20%;
}
.g-flex-ac {
  display: flex;
  align-items: center;
}
/* 水平垂直居中 */
.g-flex-cc {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 主轴为垂直方向，起点在上 */
.g-fd-c {
  display: flex;
  flex-direction: column;
}
/* 主轴为水平方向，起点在右 */
.g-fd-rr {
  display: flex;
  flex-direction: row-reverse;
}
.g-fsk-0 {
  flex-shrink: 0;
}
.g-fw-n {
  flex-wrap: nowrap;
}
.g-fw-w {
  flex-wrap: wrap;
}
.g-jc-sb {
  justify-content: space-between;
}
.g-jc-sa {
  justify-content: space-around;
}

$themeColor: #4A7EFE;
/* 字体颜色 */
.g-c-main {
  color: $themeColor !important;
}
.g-c-000 {
  color: #000;
}
.g-c-333 {
  color: #333;
}
.g-c-555 {
  color: #555;
}
.g-c-666 {
  color: #666;
}
.g-c-999 {
  color: #999;
}
.g-c-white {
  color: #fff;
}

// 数字 -- 加重
.g-ff-bn {
	font-family: 'NUM';
}

// 文字 -- 加重
.g-ff-bt {
	font-family: 'PFM';
}

.g-bg-main {
  background-color: $themeColor;
}
/* 字体大小 */
@for $i from 1 through 50 {
	.g-fs-#{$i} {
		font-size: #{$i}px;
	}
}

/* 背景色 */
.g-bg-white {
  background: #fff;
}
.g-bg-f2 {
  background: #f2f2f2;
}
.g-bg-f8 {
  background: #f8f8f8;
}
.g-bg-main {
  background: $themeColor !important;
}
/* 内边距 */
@for $i from 1 through 50 {
	.g-pd-#{$i} {
		padding: #{$i}px;
	}
	.g-pd-tb-#{$i} {
		padding-top: #{$i}px;
		padding-bottom: #{$i}px;
	}
	.g-pd-lr-#{$i} {
		padding-left: #{$i}px;
		padding-right: #{$i}px;
	}
	.g-pd-t-#{$i} {
		padding-top: #{$i}px;
	}
	.g-pd-r-#{$i} {
		padding-right: #{$i}px;
	}
	.g-pd-b-#{$i} {
		padding-bottom: #{$i}px;
	}
	.g-pd-l-#{$i} {
		padding-left: #{$i}px;
	}
}

/* 外边距 */
@for $i from 1 through 50 {
	.g-m-#{$i} {
		margin: #{$i}px;
	}
	.g-m-tb-#{$i} {
		margin-top: #{$i}px;
		margin-bottom: #{$i}px;
	}
	.g-m-lr-#{$i} {
		margin-left: #{$i}px;
		margin-right: #{$i}px;
	}
	.g-m-t-#{$i} {
		margin-top: #{$i}px;
	}
	.g-m-r-#{$i} {
		margin-right: #{$i}px;
	}
	.g-m-b-#{$i} {
		margin-bottom: #{$i}px;
	}
	.g-m-l-#{$i} {
		margin-left: #{$i}px;
	}
}

/* 圆角 */
@for $i from 1 through 20 {
	.g-br-#{$i} {
		border-radius: #{$i}px;
	}
	.g-br-tl-#{$i} {
		border-top-left-radius: #{$i}px;
	}
	.g-br-tr-#{$i} {
		border-top-right-radius: #{$i}px;
	}
	.g-br-bl-#{$i} {
		border-bottom-left-radius: #{$i}px;
	}
	.g-br-br-#{$i} {
		border-bottom-right-radius: #{$i}px;
	}
}

/* 定位 */
.g-fixed {
  position: fixed;
}
.g-absolute {
  position: absolute;
}
.g-relative {
  position: relative;
}

/* 浮动 */
.g-fl {
  float: left;
}
.g-fr {
  float: right;
}
/* 清除浮动 */
.g-clearfix {
  clear: both;
  overflow: hidden;
  &:after {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    height: 0;
    content: '.';
  }
}

/* 其他 */
.g-pointer {
  cursor: pointer;
}
.g-tc {
  text-align: center;
}
.g-tr {
  text-align: right;
}

.g-btn-sub {
  border: 1px solid $themeColor;
  color: $themeColor;
}
.g-btn-default {
  color: #999;
  border: 1px solid #aaa;
}


.g-fw-400 {
  font-weight: 400;
}
.g-fw-500 {
  font-weight: 500;
}
.g-fw-600 {
  font-weight: 600;
}
.g-fw-700 {
  font-weight: 700;
}
.g-fw-800 {
  font-weight: 800;
}
.g-fw-900 {
  font-weight: 900;
}
.g-fw-1000 {
  font-weight: 1000;
}

// 状态
.g-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.g-status-wait {
  background-color: #fa7d00;
}
.g-status-success {
  background-color: #39d713;
}
.g-status-pending {
  background-color: #2d84ff;
}
.g-status-reject {
  background-color: #ff3d3d;
}



// 公共阴影 应用于列表搜索区域 以及表格
.g-box-shadow {
  box-shadow: 0px 4px 6px 0px rgba(84, 134, 195, 0.2);
}

.g-btn-common {
  height: 40px;
  border-radius: 40px;
  font-size: 20px;
  color: #fff;
  padding: 0 24px;
  .icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
  }
  .img {
    width: 20px;
    margin-left: 12px;
  }
}
.g-btn-style1 {
  background: linear-gradient(90deg, #67a3dd 1%, #5486c3 97%);
  box-shadow: 0px 2px 0px 0px #c9d6e8;
}
.g-btn-style2 {
  background: linear-gradient(90deg, #80c2c4 0%, #3d999e 97%);
  box-shadow: 0px 2px 0px 0px #c9d6e8;
}

.g-btn-style3 {
  background: linear-gradient(180deg, #b7c0cd 0%, #99a9c1 100%);
  box-shadow: 0px 2px 0px 0px #c9d6e8;
}
.g-btn-style4 {
  background: linear-gradient(270deg, #4657a1 1%, #566db8 97%);
  box-shadow: 0px 2px 0px 0px #c9d6e8;
}


/* 文字相关 */
// 单行文本省略
.g-text-ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.g-op-85 {
  opacity: 0.85;
}
.g-op-65 {
  opacity: 0.65;
}

.g-op-45 {
  opacity: 0.45;
}
